<template>
    <modal ref="modal_1"
           :title="title"
           :isCloseConfirm="false"
           top="5%"
           width="70%"
           height="50%"
           :close-on-click-modal="false"
           @modalOpened="opened"
           @modalClose="close">
        <avue-form ref="form" :option="option" v-model="form" @tab-click="handleTabClick" >
            <template #stockInList>
                <stock-in-item-list ref="stockInItemList" :aboutItem="aboutItem"></stock-in-item-list>
            </template>
            <template #stockOutList>
                <stock-out-item-list ref="stockOutItemList" :aboutItem="aboutItem"></stock-out-item-list>
            </template>
        </avue-form>
        <template #footerButton>
            <el-button icon="el-icon-circle-close" @click="$refs.modal_1.handleClose()">关闭</el-button>
        </template>
    </modal>
</template>

<script>
    import func from '@/utils/func';
    import stockInItemList from './stock_in_item_list.vue';
    import stockOutItemList from './stock_out_item_list.vue';

    export default {
        components: {
            stockInItemList,
            stockOutItemList
        },
        data() {
            return {
                emits: ["success"],
                title:"采购单进度",
                form: {},
                query: {},
                loading: true,
                dateFormat: 'YYYY-MM-DD',
                pickerOptions: {},
                page: {
                    pageSize: 20,
                    currentPage: 1,
                    total: 0
                },
                search:{},
                selectionList: [],
                arrayList:[],
                aboutItem:{},
                option: {
                    card: true,
                    labelWidth: 100,
                    // labelPosition:'left',
                    labelSuffix: '',
                    submitBtn: false,
                    emptyBtn: false,
                    tabs: true,
                    tabsActive: 1,
                    group: [
                        {
                            icon: 'el-icon-house',
                            label: '该采购单送货列表',
                            prop: 'group1',
                            column: [
                                {
                                    label: '',
                                    className: 'addPadding',
                                    prop: 'stockInList',
                                    span: 24,
                                    labelWidth: 0,
                                    formslot: true,
                                    display: true,
                                },
                            ],
                        },
                        {
                            icon: 'el-icon-bank-card',
                            label: '该采购单退货列表',
                            prop: 'group2',
                            column: [
                                {
                                    label: '',
                                    className: 'addPadding',
                                    prop: 'stockOutList',
                                    span: 24,
                                    labelWidth: 0,
                                    formslot: true,
                                    display: true,
                                },
                            ],
                        },
                    ],
                },
                data: []
            };
        },
        methods: {
            handleTabClick(tabs) {
                if (tabs.index) {
                    this.index = func.toInt(tabs.index);
                    this.option.tabsActive = this.index + 1 > 0 ? this.index + 1 : 1;
                }
            },
            showSelect(row, title) {
                this.$refs.modal_1.show();
                this.aboutItem = row;
                console.log(this.aboutItem)
            },
            opened() {
                //  this.onLoad(this.page);
            },
            close() {
                this.clearData();
                this.clearSelection();
            },
        }
    };
</script>

<style>
    ::v-deep .el-table__row {
        height: 30px !important;
    }
    ::v-deep  .el-table__cell{
        padding:  5px !important;
    }

</style>
